﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BookingStart.aspx.cs" Inherits="HotellApplikationASP.BookingStart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <asp:Label ID="lblRoomType" AssociatedControlID="DDLRoomType" runat="server" Text="Roomtypes"></asp:Label>
    <asp:DropDownList ID="DDLRoomType" ClientIDMode="Static" runat="server" DataSourceID="SqlDataSource1" DataTextField="Description" DataValueField="CostPerNight"></asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:HotellbokningASP %>" SelectCommand="SELECT [Description], [CostPerNight] FROM [RoomTypes]"></asp:SqlDataSource>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <p>From date:</p>
    <%--<input type="text" id="datepickerFrom" />--%>
    <asp:TextBox ID="datepickerFrom" ClientIDMode="Static" runat="server"></asp:TextBox>
    <p>To date:</p>
   <%-- <input type="text" id="datepickerTo" />--%>
    <asp:TextBox ID="datepickerTo" ClientIDMode="Static" runat="server"></asp:TextBox>
    <script>
            $("#datepickerFrom").datepicker({
                onClose: function (selectedDate) {
                    $("#datepickerTo").datepicker("option", "minDate", selectedDate);
                    updateCost();
                }
            });

            $("#datepickerTo").datepicker({
                onClose: function (selectedDate) {
                    $("#datepickerFrom").datepicker("option", "maxDate", selectedDate);
                    updateCost();
                }
            });

            function updateCost() {
                var costPerNight = $("#DDLRoomType").val();
                var sDate = $("#datepickerFrom").val();
                var eDate = $("#datepickerTo").val();
                var daysBetween = (Date.parse(eDate) - Date.parse(sDate)) / 1000 / 60 / 60 / 24;
                var result = costPerNight * daysBetween;

                $("#priceP").text(result + " kr");
                
            }

    </script>
    <br />
    <br />
    <p id="priceP"></p>
    <asp:Label ID="error" runat="server" Text=""></asp:Label>
    <asp:Button ID="cmdSave" CssClass="btn-success btn" runat="server" Text="Add booking" OnClick="cmdSave_Click" />
    
</asp:Content>
